<html>
  <head>
    <title>Vega Dynamic Data Test</title/>
    <link rel="stylesheet" href="css/vega.css"/>
    <script src="lib/d3.v3.min.js"></script>
    <script src="../vega.js"></script>
    <style>
* { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; }
.view { display: block; }
input[type="range"] { width: 280px; }
.ctrl { display: inline-block; width: 90px; font-weight: bold; }
.flash { display: none; font-style: italic; }
    </style>
  </head>
  <body>
    <div><strong>Vega Dynamic Data Test</strong></div>
    <div>
      <p>Without "key" Property Definition (No Data Join)</p>
      <div id="view1" class="view"></div>
    </div>
    <div>
      <p>With "key" Property Definition (Uses Data Join)</p>
      <div id="view2" class="view"></div>
    </div>
    <div>
      <span class="ctrl">Duration</span>
      0s
      <input id="timestep" type="range" min="0" max="1000" value="1000"/>
      1s
      <br/>
      <span class="ctrl">Animation</span>
      <input id="animate" type="checkbox"/>
      <label id="alabel" for="animate">Off</label>
    </div>
    <p class="flash">Whoaaaaa!</p>
  </body>
  <script type="text/javascript">
var spec1 = {
  "width": 400,
  "height": 200,
  "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10},
  "data": [{"name": "table"}],
  "scales": [
    {
      "name": "x", "type": "ordinal", "range": "width",
      "domain": {"data": "table", "field": "data.x"}
    },
    {
      "name": "y", "range": "height", "nice": true,
      "domain": {"data": "table", "field": "data.y"}
    }
  ],
  "axes": [
    {"type": "x", "scale": "x"},
    {"type": "y", "scale": "y"}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "table"},
      "properties": {
        "enter": {
          "x": {"value": 400},
          "width": {"scale": "x", "band": true, "offset": -1},
          "y": {"scale": "y", "field": "data.y"},
          "y2": {"scale": "y", "value": 0},
          "fill": {"value": "steelblue"},
          "fillOpacity": {"value": 1e-6}
        },
        "update": {
          "x": {"scale": "x", "field": "data.x"},
          "y": {"scale": "y", "field": "data.y"},
          "y2": {"scale": "y", "value": 0},
          "fillOpacity": {"value": 1}
        },
        "exit": {
          "x": {"value": -20},
          "fillOpacity": {"value": 1e-6}
        }
      }
    }
  ]
};

var spec2 = vg.duplicate(spec1);
spec2.marks[0].key = "data.x"; // test with explicit key
  
var table = [
  {"x": 1,  "y": 28}, {"x": 2,  "y": 55},
  {"x": 3,  "y": 43}, {"x": 4,  "y": 91},
  {"x": 5,  "y": 81}, {"x": 6,  "y": 53},
  {"x": 7,  "y": 19}, {"x": 8,  "y": 87},
  {"x": 9,  "y": 52}, {"x": 10, "y": 48},
  {"x": 11, "y": 24}, {"x": 12, "y": 49},
  {"x": 13, "y": 87}, {"x": 14, "y": 66},
  {"x": 15, "y": 17}, {"x": 16, "y": 27},
  {"x": 17, "y": 68}, {"x": 18, "y": 16},
  {"x": 19, "y": 49}, {"x": 20, "y": 75}
];
var data = {table: table}, id = 20, timer = null;
var renderer = "svg", animate = false, dur = 1000;

function timestep() {
  id = (id % 100) + 1;
  table.shift();
  table.push({x: id, y: ~~(100 * Math.random())});
  self.view1.data(data).update({duration: animate ? dur : 0});
  self.view2.data(data).update({duration: animate ? dur : 0});
}

function run(step) {
  if (timer) clearInterval(timer);
  timer = setInterval(timestep, step);
}

vg.parse.spec(spec1, function(chart) {
  self.view1 = chart({
    el: "#view1",
    data: data,
    renderer: renderer,
    hover: false
  }).update();
});
vg.parse.spec(spec2, function(chart) {
  self.view2 = chart({
    el: "#view2",
    data: data,
    renderer: renderer,
    hover: false
  }).update();
});

d3.select("#timestep").on("change", function() {
  run(dur = +this.value);
  d3.select(".flash").style("display", dur==0 ? "block" : "none");
});
d3.select("#animate").on("change", function() {
  animate = this.checked;
  d3.select("#alabel").text(animate ? "On" : "Off");
});
run(dur);

  </script>
</html>